import{_ as r}from"./index.vue_vue_type_style_index_0_lang2.js";import{d as t,e as i,r as d,$ as n,P as l,Q as m,K as c,a2 as k,a5 as p,R as s}from"./elementPlusModules.js";const u=s("p",null,"通过设置 columns 属性 slots 自定义表格头及对应列单元格的 render 函数",-1),y=s("p",null,"render 函数是比插槽更简易的渲染方法，如果需要直接 render HTML 则需要修改 script 标签属性 lang = 'tsx'",-1),J=t({__name:"Render",setup(g){const o=i(`
  <template>
    <div style="height: 70vh">
      <MerakXTable
        :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
        :columns="state.columns"
        :data="state.data"
        :pagination="false"
      >
      </MerakXTable>
    </div>
  </template>
  
  <script setup lang="tsx">
  import { reactive } from "vue";
  
  import MerakXTable, { MerakXTableColumn } from "../../../../../components/MerakXTable";
  
  const state = reactive<{
    columns: MerakXTableColumn[];
    data: any[];
  }>({
    columns: [
    {
      field: "name",
      title: "Name",
      slots: {
        header: ({ column }) => \`rendre 函数-\${column.title}\`,
        default: ({ row }) => <div style="color: red;">{row.name}</div>
      }
    },
      { field: "age", title: "Age" },
      { field: "address", title: "Address" }
    ],
    data: [
      {
        id: "1",
        name: "John Brown",
        age: 32,
        address: "New York No. 1 Lake Park",
        description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
      },
      {
        id: "2",
        name: "Jim Green",
        age: 42,
        address: "London No. 1 Lake Park",
        description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
      },
      {
        id: "3",
        name: "Not Expandable",
        age: 29,
        address: "Jiangsu No. 1 Lake Park",
        description: "This not expandable"
      },
      {
        id: "4",
        name: "Joe Black",
        age: 32,
        address: "Sydney No. 1 Lake Park",
        description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
      }
    ]
  });
  <\/script>
  `),a=d({columns:[{field:"name",title:"Name",slots:{header:({column:e})=>`rendre 函数-${e.title}`,default:({row:e})=>n("div",{style:"color: red;"},[e.name])}},{field:"age",title:"Age"},{field:"address",title:"Address"}],data:[{id:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{id:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{id:"3",name:"Not Expandable",age:29,address:"Jiangsu No. 1 Lake Park",description:"This not expandable"},{id:"4",name:"Joe Black",age:32,address:"Sydney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."}]});return(e,N)=>(l(),m(p,null,[u,y,n(c(r),{"columns-by-store":JSON.parse(JSON.stringify(a.columns)),columns:a.columns,data:a.data,pagination:!1},null,8,["columns-by-store","columns","data"]),k(e.$slots,"default",{html:o.value})],64))}});export{J as _};
